<template>
	<el-container>
			<el-main class="nopadding">
				<el-container>
					<el-header style="height:190px;">
						<div > 
							<div>
								<sc-select-filter :data="filterData" :selected-values="this.search.filterData" :label-width="80" @on-change="filterChange"></sc-select-filter>
							</div>
							<div style="padding-top:5px" >
								<el-space :size="30" spacer=" "> 发生时间：</el-space><el-date-picker v-model="date" type="datetimerange" value-format="YYYY-MM-DD HH-mm-ss" :shortcuts="shortcuts" :disabledDate="disabledDate" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" :clearable='false' :editable="false" @change="dateChange" @input="dateChange"></el-date-picker>
							</div>
							<div style="padding-top:5px">
								<el-space :size="30" spacer=" ">发生台站：</el-space><el-cascader v-model="search.dept" :options="depts" :props="deptsProps" clearable style="width: 70%;"></el-cascader>
							</div>
						</div>
						<div class="right-panel"><el-button type="primary" icon="el-icon-search" @click="upsearch"></el-button></div>
					</el-header>
					<!-- <el-header v-if="1==0" style="height:150px;">
						<scEcharts height="100%" :option="logsChartOption"></scEcharts>
					</el-header> -->
					<el-main class="nopadding">
						<scTable ref="table" :apiObj="apiObj" :params="search" stripe highlightCurrentRow>
							<el-table-column label="ID" prop="AlertID" width="80"></el-table-column>
							<el-table-column label="对应DataID" v-if="1==0" prop="SourceDataID" width="100"></el-table-column>
							<el-table-column label="台站" prop="fullorgName" width="180"></el-table-column>
							<el-table-column label="发射机编号" prop="TransmitterNumber" width="90"></el-table-column>
							<el-table-column label="天线编号" prop="AnntenaNumber" width="80"></el-table-column>
							<el-table-column label="预警频率" prop="Frequency" width="100"></el-table-column>
							<el-table-column label="预警功率" prop="Capacity" width="100"></el-table-column>
							<el-table-column label="报警类型" prop="typelabel" width="100"></el-table-column>
							<el-table-column label="发生时间" prop="time" width="200"></el-table-column>
							<el-table-column label="持续时长" prop="AlertDuration" width="100"></el-table-column>
							<el-table-column label="预警状态" prop="statuslabel" width="150"></el-table-column>							
							<el-table-column label="操作" fixed="right" align="right" width="160">
								<template #default="scope">
									<el-button-group>
										<el-button text type="primary" size="small" @click="table_show(scope.row, scope.$index)">查看</el-button>
										<el-button text type="primary" size="small" @click="table_edit(scope.row, scope.$index)">处置</el-button>
										<el-popconfirm title="确定删除吗？" @confirm="table_del(scope.row, scope.$index)">
											<template #reference>
												<el-button text type="primary" size="small">删除</el-button>
											</template>
										</el-popconfirm>
									</el-button-group>
								</template>
							</el-table-column>
						</scTable>
					</el-main>
				</el-container>
			</el-main>
	</el-container>

	<el-drawer v-model="infoDrawer" title="报警详情" :size="600" destroy-on-close>
		<info ref="info" @closeDrawer="closeDrawer"></info>
	</el-drawer>
</template>

<script>
	import info from './info'
	import tool from '@/utils/tool'
	import scEcharts from '@/components/scEcharts'
	import scSelectFilter from '@/components/scSelectFilter'

	export default {
		name: 'alert',
		components: {info,scEcharts,scSelectFilter},
		data() {
			return {
				showSyslog: true,
				infoDrawer: false,
				isLoading : false,
				filterData: [],
				shortcuts: tool.getDateShortcuts(),
				date: [],
				apiObj: this.$API.system.alert.list,
				search: {
					keyword: "",
					startTime:'',
					endTime:'',
					status:'',
					dept:null,
					filterData: {},
					dept: -1,   //默认全部
				},
				depts: [],
				deptsProps: {
					value: "id",
					checkStrictly: true
				},
			}
		},
		created(){
			this.getDept()
			this.initdate()
		},
		mounted(){
		},
		methods: {
			upsearch(){
				this.$refs.table.reload(this.search)
			},
			rowClick(row){
				this.infoDrawer = true
				this.$nextTick(() => {
					this.$refs.info.setData(row)
				})
			},
			closeDrawer(value){
				this.infoDrawer = value
				// 更新列表
				if(!value){
					this.upsearch()
				}
			},
			async getDept(){
				var res = await this.$API.system.dept.list.get();
				this.depts = res.data;
			},
			async initdate(){
				let oneDay = 1000 * 60 * 60 * 24;
			    let dateNextZero = new Date(new Date().getTime());
				dateNextZero.setHours(23);
				dateNextZero.setMinutes(59);
				dateNextZero.setSeconds(59);
				dateNextZero = tool.dateFormat(dateNextZero)
			    let date6Before = new Date(new Date().getTime() - (oneDay * 6));
				date6Before.setHours(0);
				date6Before.setMinutes(0);
				date6Before.setSeconds(0);
				date6Before = tool.dateFormat(date6Before)
				this.date = [date6Before, dateNextZero];
				this.search.startTime = date6Before
				this.search.endTime = dateNextZero

				// 必须要一次性给 data
				let fData = []
				//字典表字段 AlertType
				let res = await this.$API.system.dic.listBycode.get({code: 'AlertType' })
				if (res.code=200){
					let options = res.data.rows.map((item,index) => {
                         return Object.assign({},{label:item.name,value:item.key})
					})
					options.unshift({label:'全部',value:'-1'})
					fData.push({title:'报警类型', key:'AlertType',multiple: true,options: options})
				}
				//字典表字段 AlertStatus
				res = await this.$API.system.dic.listBycode.get({code: 'AlertStatus' })	
				if (res.code=200){
					let options = res.data.rows.map((item,index) => {
                         return Object.assign({},{label:item.name,value:item.key})
					})
					options.unshift({label:'全部',value:'-1'})
					fData.push({title:'预警状态', key:'status',multiple: true,options: options })
				}
				this.filterData = fData
				this.search.filterData = {AlertType: '-1', status: '-1'}
			},
			dateChange(val){
				this.search.startTime = this.date[0]
				this.search.endTime = this.date[1]
				this.upsearch()
			},
			disabledDate(time){
				return time.getTime() > new Date().getTime() + 8.64e7;
			},
			filterChange(selected){
				this.search.filterData = selected
			},
			//编辑
			table_edit(row){
				this.infoDrawer = true
				this.$nextTick(() => {
					this.$refs.info.open('edit').setData(row)
				})
			},
			//查看
			table_show(row){
				this.infoDrawer = true
				this.$nextTick(() => {
					this.$refs.info.open('show').setData(row)
				})
			},
			//删除
			async table_del(row, index){
				var reqData = {userIds: [row.id], userName:row.userName}
				var res = await this.$API.system.alert.delete.delete(reqData);
				if(res.code == 200){
					//这里选择刷新整个表格 OR 插入/编辑现有表格数据
					this.$refs.table.tableData.splice(index, 1);
					this.$message.success("删除成功")
					
				}else{
					this.$alert(res.message, "提示", {type: 'error'})
				}
			},
		}
	}
</script>

<style>
</style>
